<template>
  <div class="container">
    <ValidateForm
      @form-submit="handleSubmit"
    >
      <ValidateInput type="text" placeholder="请输入邮箱" v-model="emailVal" :roles="roles"></ValidateInput>
    </ValidateForm>
    <GlobalHeader :user="userData"></GlobalHeader>
    <ColumnList :list="list"></ColumnList>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import ColumnList, { ColumnProps } from '@/components/ColumnList.vue'
import GlobalHeader, { UserProps } from '@/components/GlobalHeader.vue'
import ValidateInput, { RulesProp } from '@/components/ValidateInput.vue'
import ValidateForm from '@/components/ValidateForm.vue'
import 'bootstrap/dist/css/bootstrap.min.css'
const testData:ColumnProps[] = [
  {
    id: 1,
    title: 'test1的专栏',
    description: '这是test1的专栏，这是test1的专栏，这是test1的专栏，这是test1的专栏',
    avatar: 'http://q2.qlogo.cn/headimg_dl?dst_uin=571884932&spec=100&v=0.3335398213821117'
  },
  {
    id: 2,
    title: 'test1的专栏',
    description: '这是test1的专栏，这是test1的专栏，这是test1的专栏，这是test1的专栏',
    avatar: 'http://q2.qlogo.cn/headimg_dl?dst_uin=571884932&spec=100&v=0.3335398213821117'
  },
  {
    id: 3,
    title: 'test1的专栏',
    description: '这是test1的专栏，这是test1的专栏，这是test1的专栏，这是test1的专栏'
  },
  {
    id: 4,
    title: 'test1的专栏',
    description: '这是test1的专栏，这是test1的专栏，这是test1的专栏，这是test1的专栏',
    avatar: 'http://q2.qlogo.cn/headimg_dl?dst_uin=571884932&spec=100&v=0.3335398213821117'
  }
]
const userData:UserProps = {
  isLogin: true,
  nickName: 'Break',
  id: 0
}
export default defineComponent({
  name: 'App',
  components: {
    ColumnList,
    GlobalHeader,
    ValidateInput,
    ValidateForm
  },
  setup () {
    const roles = ref<RulesProp>([{
      type: 'required',
      message: '电子邮箱不能为空'
    }, {
      type: 'email',
      message: '请输入邮箱！'
    }])
    const emailVal = ref('Break')

    const handleSubmit = (res:boolean) => {
      console.log(res)
    }

    return {
      list: testData,
      userData,
      roles,
      emailVal,
      handleSubmit
    }
  }
})
</script>

<style>

</style>
